<template>
  <div class="table-container">
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="year" label="年份" width="100" />
      <el-table-column prop="gepCity" label="城市" min-width="120" />
      <el-table-column prop="gepDistrict" label="区县" min-width="120" />
      <el-table-column prop="gepTown" label="乡镇" min-width="120" />
      
      <!-- 农业相关参数 -->
      <el-table-column prop="inAgricultural" label="农业产值" min-width="120">
        <template #default="{ row }">
          {{ row.inAgricultural ? `${row.inAgricultural}万元` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="inForestry" label="林业产值" min-width="120">
        <template #default="{ row }">
          {{ row.inForestry ? `${row.inForestry}万元` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="inAnimalHusbandry" label="牧业产值" min-width="120">
        <template #default="{ row }">
          {{ row.inAnimalHusbandry ? `${row.inAnimalHusbandry}万元` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="inFishery" label="渔业产值" min-width="120">
        <template #default="{ row }">
          {{ row.inFishery ? `${row.inFishery}万元` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 能源相关参数 -->
      <el-table-column prop="inEcologicalEnergy" label="生态能源发电量" min-width="140">
        <template #default="{ row }">
          {{ row.inEcologicalEnergy ? `${row.inEcologicalEnergy}万千瓦时` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="inElectricityPrice" label="电价" min-width="100">
        <template #default="{ row }">
          {{ row.inElectricityPrice ? `${row.inElectricityPrice}元/千瓦时` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 水资源相关参数 -->
      <el-table-column prop="inWaterResources" label="水资源总量" min-width="120">
        <template #default="{ row }">
          {{ row.inWaterResources ? `${row.inWaterResources}万立方米` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="inLocalWaterPrice" label="当地水价" min-width="120">
        <template #default="{ row }">
          {{ row.inLocalWaterPrice ? `${row.inLocalWaterPrice}元/立方米` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 保护区相关参数 -->
      <el-table-column prop="inProtectedArea" label="保护区面积" min-width="120">
        <template #default="{ row }">
          {{ row.inProtectedArea ? `${row.inProtectedArea}平方千米` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="inProtectedCost" label="保育成本" min-width="120">
        <template #default="{ row }">
          {{ row.inProtectedCost ? `${row.inProtectedCost}万元/平方千米` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 噪声相关参数 -->
      <el-table-column prop="inNoiseReductionAmount" label="噪声消减量" min-width="120">
        <template #default="{ row }">
          {{ row.inNoiseReductionAmount ? `${row.inNoiseReductionAmount}万dB` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="inNoiseCost" label="噪声降低成本" min-width="120">
        <template #default="{ row }">
          {{ row.inNoiseCost ? `${row.inNoiseCost}元/dB` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 旅游相关参数 -->
      <el-table-column prop="inTourismRevenue" label="旅游收入" min-width="120">
        <template #default="{ row }">
          {{ row.inTourismRevenue ? `${row.inTourismRevenue}万元` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 住房相关参数 -->
      <el-table-column prop="inHousingAreaPerCapita" label="城镇人均住房面积" min-width="140">
        <template #default="{ row }">
          {{ row.inHousingAreaPerCapita ? `${row.inHousingAreaPerCapita}平方米` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="inHousePrice" label="当地房价" min-width="120">
        <template #default="{ row }">
          {{ row.inHousePrice ? `${row.inHousePrice}元/平方米` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 酒店相关参数 -->
      <el-table-column prop="inHotelRooms" label="酒店客房总数" min-width="120">
        <template #default="{ row }">
          {{ row.inHotelRooms ? `${row.inHotelRooms}间` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="inRoomPrice" label="客房价格" min-width="120">
        <template #default="{ row }">
          {{ row.inRoomPrice ? `${row.inRoomPrice}元/间` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 人口相关参数 -->
      <el-table-column prop="inUrbanPopulation" label="城镇常住人口" min-width="120">
        <template #default="{ row }">
          {{ row.inUrbanPopulation ? `${row.inUrbanPopulation}万人` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="inOccupancyRate" label="年入住率" min-width="120">
        <template #default="{ row }">
          {{ row.inOccupancyRate ? `${row.inOccupancyRate}%` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 休闲相关参数 -->
      <el-table-column prop="inLeisureTime" label="日休闲游憩时间" min-width="140">
        <template #default="{ row }">
          {{ row.inLeisureTime ? `${row.inLeisureTime}时/天人` : '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="inAverageIncome" label="人均工资" min-width="120">
        <template #default="{ row }">
          {{ row.inAverageIncome ? `${row.inAverageIncome}元/人时` : '-' }}
        </template>
      </el-table-column>
      
      <!-- 系统字段 -->
      <el-table-column prop="creator" label="创建者" min-width="100" />
      <el-table-column prop="created_at" label="创建时间" min-width="160">
        <template #default="{ row }">
          {{ formatDate(row.created_at) }}
        </template>
      </el-table-column>
      
      <!-- 操作列 -->
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" @click="handleEdit(row)">
            <el-icon><Edit /></el-icon>
            编辑
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(row)">
            <el-icon><Delete /></el-icon>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.per_page"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  tableData: {
    type: Array,
    default: () => []
  },
  pagination: {
    type: Object,
    default: () => ({
      page: 1,
      per_page: 10,
      total: 0
    })
  }
})

const emit = defineEmits(['selection-change', 'edit', 'delete', 'size-change', 'current-change'])

const handleSelectionChange = (selection) => {
  emit('selection-change', selection)
}

const handleEdit = (row) => {
  emit('edit', row)
}

const handleDelete = (row) => {
  emit('delete', row)
}

const handleSizeChange = (size) => {
  emit('size-change', size)
}

const handleCurrentChange = (page) => {
  emit('current-change', page)
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  return new Date(dateString).toLocaleString('zh-CN')
}
</script>

<style scoped>
.table-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.pagination-container {
  padding: 20px;
  text-align: right;
  background: #fff;
}

:deep(.el-table) {
  border-radius: 0;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-pagination) {
  justify-content: flex-end;
}
</style> 